<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="类别列表" />
    </div>
    <div>
      <van-row>
        <!-- 左侧列表 -->
        <van-col span="6">
          <div id="leftNav">
            <ul>
              <li
                v-for="(item,index) in category"
                :key="index"
                @click="clickCategory(index, item.ID)"
                :class="{categoryActive:categoryIndex==index}"
              >
                {{item.MALL_CATEGORY_NAME}}
              </li>
            </ul>
          </div>
        </van-col>
        <!-- 右侧列表 -->
        <van-col span="18">
          <div class="tabCategorySub">
            <van-tabs
              v-model="active"
              @click="onClickCategorySub"
            >
              <van-tab
                v-for="(item, index) in categorySub"
                :key="index"
                :title="item.MALL_SUB_NAME"
              >
              </van-tab>
            </van-tabs>
          </div>
          <div id="list-div">
            <van-pull-refresh
              v-model="isRefresh"
              @refresh="onRefresh"
            >
              <van-list
                v-model="loading"
                :finished="finished"
                @load="onload"
              >
                <div
                  class="list-item"
                  v-for="(item, index) in goodList"
                  :key="index"
                  @click="goGoodsInfo(item.ID)"
                >
                  <div class="list-item-img"><img
                      :src="item.IMAGE1"
                      width="100%"
                      :onerror="errorImg"
                    /></div>
                  <div class="list-item-text">
                    <div>{{item.NAME}}</div>
                    <div class="">￥{{item.ORI_PRICE}}</div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
import url from '../../serviceApi.config'
export default {
  data() {
    return {
      // categoryList: []
      category: [],
      categoryIndex: 0,
      active: 0,
      categorySub: [],
      page: 1,          //商品列表的页数
      goodList: [],     //商品信息
      categorySubId: '', //商品子分类ID
      loading: false,   //上拉加载使用
      finished: false,  //下拉加载是否没有数据
      isRefresh: false, //下拉加载
      errorImg: 'this.src="'+require('@/assets/images/errorimg.png')+'"'
    }
  },
  created() {
    this.getCategory()
  },
  mounted() {
    let winHeight = document.documentElement.clientHeight
    document.getElementById("leftNav").style.height = winHeight - 46 -50+ 'px'
    document.getElementById('list-div').style.height = winHeight - 90 -50 + 'px'
  },
  methods: {
    async getGoodList() {
      const result = await this.$http.post(url.getGoodsListByCategorySubID, {
        categorySubId: this.categorySubId,
        page: this.page
      })
      console.log(result)
      if (result.data.code == 200 && result.data.message.length) {
        this.page++
        this.goodList = this.goodList.concat(result.data.message)
      } else {
        this.finished = true
      }
      this.loading = false
    },
    async getCategory() {
      const result = await this.$http.get(url.getCategoryList)
      console.log(result)
      this.category = result.data.message
      this.getCategorySubByCategoryId(this.category[0].ID)
    },
    //根据大类ID读取小类类别列表
    async getCategorySubByCategoryId(categoryId) {
      console.log(categoryId)
      const result = await this.$http.post(url.getCategorySubList, { categoryId: categoryId })
      console.log(result)
      this.categorySub = result.data.message
      this.active = 0
      this.categorySubId = this.categorySub[0].ID
    },
    //点击大类的方法
    clickCategory(index, categoryId) {
      this.categoryIndex = index
      this.page = 1
      this.finished = false
      this.goodList = []
      this.getCategorySubByCategoryId(categoryId)
    },
    //点击子类获取商品信息
    onClickCategorySub(index, title) {
      //console.log( this.categorySub)
      this.categorySubId = this.categorySub[index].ID
      console.log(this.categorySubId)
      this.goodList = []
      this.finished = false
      this.page = 1
      this.onload()

    },
    // 上拉加载
    onload() {
      setTimeout(() => {
        this.categorySubId = this.categorySubId ? this.categorySubId : this.categorySub[0].ID
        this.getGoodList()
      }, 1000)
    },
    onRefresh() {
      setTimeout(() => {
        this.isRefresh = false;
        this.finished = false;
        this.goodList=[];
        this.page=1
        this.onload()
      }, 500);
    },
    goGoodsInfo(id) {
      this.$router.push({name: 'Goods', params:{goodsId: id}})
    }
  }
}
</script>

<style scoped>
#leftNav {
  background: aliceblue;
}
#leftNav ul li {
  line-height: 2rem;
  border-bottom: 1px solid #e4e7ed;
  padding: 3px;
  font-size: 0.8rem;
  text-align: center;
}
.categoryActive {
  background-color: #fff;
}
.list-item {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  padding: 5px;
}
#list-div {
  overflow: scroll;
}
.list-item-img {
  flex: 8;
}
.list-item-text {
  flex: 16;
  margin-top: 10px;
  margin-left: 10px;
}
</style>